<template>
  <div class="index">
    <!-- 标题 -->
    <div style="position:fixed;top:0;width:100%;z-index:1000;"><van-nav-bar title="首页"></van-nav-bar></div>
    <!-- 内容 -->
    <div class="index_content">
      <!-- 栏目信息 -->
      <div>
        <van-sidebar class="product_category" v-model="active">
          <van-sidebar-item :url="'#product_list'+c.id" :title="c.name" v-for="c in cps" :key="c.id" />
        </van-sidebar>
      </div>
      <div @wheel="wheelHandler" class="product_lists">
        <!-- 栏目产品信息 -->
        <div v-for="cp in cps" :key="cp.id">
          <div :id="'product_list'+cp.id" :ref="'product'+cp.id" class="category_name">{{cp.name}}</div>
          <ul class="product_list">
            <li class="product" v-for="p in cp.products" :key="p.id">
              <div class="photo"><img :src="p.photo" alt=""></div>
              <div class="details">
                <div class="name">{{p.name}}</div>
                <div class="price">
                  ￥{{p.price}}/ {{p.unit?p.unit:'例'}}
                  <div class="stepper_btn">
                    <van-stepper 
                      :min="0"
                      integer 
                      theme="round"
                      button-size="18px"
                      input-width="24px"
                      :show-minus="p.num>0"
                      :show-input="p.num>0"
                      :default-value='0' 
                      v-model="p.num" />
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <van-action-bar  class="shopcart">
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="cart-o" text="购物车" :badge="cart.num" @click="show=!show" />
        <van-action-bar-button type="danger" text="立即购买" @click="toConfirmOrderHandler" />
      </van-action-bar>
      <!-- <div class="shopcart">
        <div class="icon">
          <span></span>
          <span>{{cart.num}}</span>
        </div>
        <div class="total">{{cart.total}}</div>
        <div class="submit" @click="toConfirmOrderHandler">结算</div>
      </div> -->
      <!-- 购物车 -->
      <van-popup
        v-model:show="show"
        :overlay="false"
        closeable
        position="bottom"
        :style="{ height: '30%',marginBottom:'100px' }">
        <div v-if="cart.num==0" style="text-align:center;margin-top:3em">暂无选购的商品，请先添加商品</div>
        <div v-else class="cart_content">
          <div class="cart_title">
            <van-divider :style="{ color: 'rgb(209,57,47)', borderColor: '#1989fa', margin: '0 16px' }">
              购物车
            </van-divider>
          </div>
          <van-card v-for="(item,index) in cart.list" :key="index"
          :num="item.num"
          :price="item.price"
          :desc="item.description"
          :title="item.name"
          :thumb="item.photo">
          </van-card>
          <div style="text-align:right;margin:.5em .5em 0">总数：{{cart.num}}  共计：<span style="color: rgb(209,57,47)">￥{{cart.total}}</span></div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import {onMounted, ref, reactive, computed} from 'vue'
import {useRouter} from 'vue-router'
import {get} from '../../utils/request'
export default {
  setup() {
    let active = ref(0) // 双向数据绑定
    let cps = ref([]) // 分类及产品
    let router = useRouter();  // 使用路由
    let show = ref(false);  // 控制购物车的弹出层
    // let product9437 = reactive({});
    // let product9438 = ref(null);
    // let product9439 = ref(null);
    // let product9440 = ref(null);
    // 加载栏目产品数据
    let loadCategoryProducts = async ()=>{
      let url = "/app/product/queryCategoryWithProducts"
      let resp = await get(url);
      cps.value = resp.data;
    };
    let wheelHandler = ()=>{
      // console.log(window.screen);
      // console.log(product9437.target);
      // if(product9437.offsetTop<46){
      //   console.log(product9437.offsetTop);
      //   active.value = 0;
      // }else if(product9438.value.offsetTop<46){
      //   active.value = 1;
      // }else if(product9439.value.offsetTop<46){
      //   active.value = 2;
      // }else if(product9440.value.offsetTop<46){
      //   active.value = 3;
      // }
    }
    // {num:,total:}
    let cart = computed(()=>{
      let result = {num:0,total:0,list:[]}
      cps.value.forEach(cp => {
        cp.products.forEach(p=>{
          if(p.num>0){
            result.total += p.num * p.price;  // 计算总价/总数
            result.num += p.num;
            result.list.push({name:p.name,price:p.price,num:p.num,photo:p.photo});  // 获取购物车列表
          }
        })
      });
      return result;
    })
    // 去确认订单处理函数
    let toConfirmOrderHandler = ()=>{
      let orderLines = [];
      cps.value.forEach((cp)=>{
        cp.products.forEach(p=>{
          if(p.num>0){
            orderLines.push(p);
          }
        })
      })
      router.push({
        name:'confirm_order',
        params:{orderLines:JSON.stringify(orderLines)}
      })
    }

    onMounted( async ()=>{
      await loadCategoryProducts();
      // console.log(product9437);
      // console.log(product9438.value);
      // console.log(product9439.value);
    })

    return {
      active,
      cps,
      cart,
      show,
      // product9437,
      // product9438,
      // product9439,
      wheelHandler,
      toConfirmOrderHandler
    }
  },
}
</script>

<style lang="scss" scoped>
.index_content {
  display: flex;
  .product_category{
    position: sticky;
    top: 46px;
  }
  .shopcart {
    // position: fixed;
    bottom: 50px;
    // width: 60%;
    // background-color: pink;
    // border: 1px solid #ccc;
    // border-radius: 5px;
  }
  .product_lists {
    // margin-top: 46px;
    flex:1;
    background: #fff;
    padding: 0 .5em;
    &::after{
      content: '';
      height: 300px;
      display: block;
    }
    .category_name {
      color: rgb(100,101,102);
      // font-weight: bold;
      line-height: 3em;
    }
    .product_list {
      .product {
        padding: .5em 0;
        border-bottom: 1px solid #f4f4f4;
        display: flex;
        .photo {
          width: 100px;
          height:80px;
          overflow: hidden;
          img {
            height:100%
          }
        }
        .details {
          flex: 1;
          padding-left:.5em;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: relative;
          .price{
            color: red;
            .stepper_btn {
              position: absolute;
              bottom: 4px;
              right: .2em;
            }
          }
        }
      }
    }
  }
  .cart_content{
    padding: 1em;
    .cart_title{
      color: rgb(209,57,47);
      background-color: #fff;
      font-weight: bold;
      // width: 80%;
      position: sticky;
      top: 0;
      z-index: 1;
    }
  }
}
</style>